<template>
  <el-table :data="filterTableData" style="width: 100%;height: 870px;">
    <el-table-column label="工号" prop="jobNumber" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="所属医院" prop="hospital" />
    <el-table-column label="等级" prop="level" />
    <el-table-column label="所属部门" prop="depart" />
    <el-table-column label="角色" prop="role" />
    <el-table-column label="工作量" prop="workLoad" width="70" />
    <el-table-column label="邮箱" prop="contact" />
    <el-table-column label="地区" prop="area" />
    <el-table-column label="擅长部位" prop="goodAt" />
    <el-table-column label="更新时间" prop="updateTime" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm title="你确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="编辑医生👨‍⚕️" >

          <el-form :model="doctorForm">
            <div class="box" style="width: 100%;height: 100%;display: flex;flex-direction: row;">

              <div class="left">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="工号" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.jobNumber" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.gender" autocomplete="off" />
                </el-form-item>
                <el-form-item label="所属医院" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.hospital" autocomplete="off" />
                </el-form-item>
                <el-form-item label="等级" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.level" autocomplete="off" />
                </el-form-item>
              </div>

              <div class="right">
                <el-form-item label="所属部门" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.depart" autocomplete="off" />
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.role" autocomplete="off" />
                </el-form-item>

                <el-form-item label="邮箱" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.contact" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地区" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.area" autocomplete="off" />
                </el-form-item>
                <el-form-item label="擅长部位" :label-width="formLabelWidth">
                  <el-input v-model="doctorForm.goodAt" autocomplete="off" />
                </el-form-item>
              </div>

            </div>

          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>             
                <el-button type="primary" @click="confrimEdit">
                确认更改
              </el-button>             
            </span>
          </template>

        </el-dialog>
  
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { deleteDoctorById, getDoctors, editDoctor } from '../../api/user.js';
import dayjs from "dayjs"
interface User {
  id: string
  name: string
  jobNumber: string
  gender: string
  age: string
  hospital: string
  level: string
  depart: string
  role: string
  workLoad: string
  contact: string
  area: string
  goodAt: string
  updateTime: string

}


onMounted(() => {
  getDoctors("全国", "全部部位").then(res => {
    console.log(res.data);
    res.data.forEach(item => {
      //@ts-ignore
      item.updateTime = Math.floor(item.updateTime / 1000)
      //@ts-ignore
      item.updateTime = dayjs.unix(item.updateTime).format('YYYY-MM-DD')
    })
    doctors.value = res.data

  })

})
const data = reactive({
  doctors: [] as User[],
  dialogFormVisible: false,

})
const formLabelWidth = ref('140px')

let doctorForm: User = reactive({
  id: "",
  name: "",
  jobNumber: "",
  gender: "",
  age: "",
  hospital: "",
  level: "",
  depart: "",
  role: "",
  workLoad: "",
  contact: "",
  area: "",
  goodAt: "",
  updateTime: ""

})

let { doctors, dialogFormVisible } = toRefs(data)

const search = ref('')
let filterTableData = computed(() =>
  doctors.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)

const handleEdit = (index: number, row: User) => {
  dialogFormVisible.value = true
  Object.assign(doctorForm, row);

}
const handleDelete = async (index: number, row: User) => {
  console.log(index, row)
  try {
    const res = await deleteDoctorById(row.id)
    if (res.data.code = 200 && index !== -1) {
      doctors.value.splice(index, 1); // 删除行
      doctors.value = [...doctors.value]; // 更新数据源
    }
  } catch (error) {
    console.error(error);
  }
}

async function confrimEdit() {
  const res = await editDoctor(doctorForm)
  if (res.data.code == 200) {
    dialogFormVisible.value = false
    location.reload();

  }
}

</script>